feat(novel-reader): render inline novel images with correct aspect ratio#122
Open
andrew05060414 wants to merge 14 commits intoalphasp:masterfrom
Open
feat(novel-reader): render inline novel images with correct aspect ratio#122andrew05060414 wants to merge 14 commits intoalphasp:masterfrom
andrew05060414 wants to merge 14 commits intoalphasp:masterfrom
Conversation
Made-with: Cursor
Image aspect ratio:
- Replace Image.getSize() with Image.getSizeWithHeaders() passing Referer
header so Pixiv CDN accepts the request and returns real dimensions
- Add onLoad handler on PXImage as fallback: reads nativeEvent.source
width/height once the image actually loads
Login flow (PXWebView + PKCE):
- Handle intent:// deep-links in PXWebView.onShouldStartLoadWithRequest
so Pixiv OAuth redirects open correctly on Android
- Add setSupportMultipleWindows={false} to prevent unwanted tab opens
- Persist PKCE verifier to AsyncStorage so it survives the OAuth round-trip
- Fix Login.js to await async PKCE.getPKCE() call
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…incomplete Parse nested ajax novel payloads and merge embedded image candidates from ajax/webview/html so uploadedimage markers no longer fall back to Image unavailable diagnostics. Made-with: Cursor
Split reader navigation positioning into two independent settings so users can choose slider and percentage badge sides separately in both global and in-reader settings. Made-with: Cursor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Pixiv novels support two types of inline images that are currently not rendered in the reader:
[uploadedimage:ID]— images uploaded specifically for a novel[pixivimage:ID]— regular Pixiv illustrations embedded in novel textThis PR adds full support for both, fetching metadata and displaying each image inline at its correct aspect ratio.
Changes
Core image rendering
NovelInlineImage.js(new component): resolves image URLs and aspect ratios from embedded metadata or the Pixiv API; falls back toImage.getSizeWithHeaders(withRefererheader so Pixiv CDN accepts the request), then to anonLoadnative measurement as a final safety netNovelViewer.js: renders<px-image>custom tags asNovelInlineImagecomponents inline with novel textnovelTextParser.js: converts[uploadedimage:ID]/[loadedimage:ID]markers in novel text to<px-image>tagsnovelInlineImage.js(new helper): tag builder and text-scanner for inline image markersnovelAjaxParser.js(new helper): extracts novel data (text, embedded images) from the Pixiv AJAX endpoint/ajax/novel/:idnovelWebviewParser.js(new helper): fallback parser that extracts the same data from the Pixiv webview HTML (__NEXT_DATA__,meta-preload-data, legacy state)novelWebviewImageCandidates.js(new helper): scrapesoriginalUrl+ dimensions for[uploadedimage]entries from raw HTML when the API response lacks themnovelText.jssaga: tries the AJAX endpoint first; falls back to webview HTML; mergestextEmbeddedImageswith scraped candidates before dispatching successLogin flow stability
PXWebView.js: interceptsintent://deep-links and forwards them viaLinking.openURLso the Pixiv OAuth redirect works on Android; addssetSupportMultipleWindows={false}pkce.js: persists the PKCE verifier inAsyncStorageso it survives the OAuth round-trip if the in-memory value is lostLogin.js: awaits the now-asyncPKCE.getPKCE()callTest plan
[uploadedimage:ID]markers — images should appear inline at their original aspect ratio (not cropped to square)[pixivimage:ID]markers — illustrations should appear inline🤖 Generated with Claude Code